*{
	padding: 0px;
	margin: 0px;
}
li{
	list-style: none;
}
.bg_box{
	width:100%;
	height: 100%;
	background: red;
	position: fixed;
	background: url(../img/bg.jpg);
	background-size: 100% 100%;
	animation: bgmove 300s linear infinite ;
}
.box{
	width: 900px;
	height: 300px;
	/* border: solid aqua 2px; */
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 0px;
	right: 0px;
	margin: auto;
	top: 500px;
}
.box li{
	width: 185px;
	height: 250px;
	/* border: #FF0000 solid 2px; */
	text-align: center;
	line-height: 250px;
	
	/* display: inline-block; */
}
.box li:nth-child(1){
	background: url(../img/1.png);
	background-repeat: no-repeat;
	animation: one 1s infinite step-end ;
}
.box li:nth-child(2){
	background: url(../img/3.png);
	background-repeat: no-repeat;
	animation: two 1s infinite step-end ;
}
.box li:nth-child(3){
	background: url(../img/2.png);
	background-repeat: no-repeat;
	animation: one 1s infinite step-end ;
}
.box li:nth-child(4){
	background: url(../img/4.png);
	background-repeat: no-repeat;
	animation: three 1s infinite step-end ;
}
@keyframes bgmove{
	0%{
		background-position: left top;
	}
	100%{
		background-position: 15000px top;
	}
}
@keyframes one{
	
	0%{
		background-position: left top;
	}
	12.5%{
		background-position: -200px top;
	}
	25%{
		background-position: -400px top;

	}
	37.5%{
		background-position: -600px top;

	}
	50%{
		background-position: -800px top;

	}
	62.5%{
		background-position: -1000px top;
	}
	75%{
		background-position: -1200px top;

	}
	87.5%{
		background-position: -1400px top;

	}
	100%{
		background-position: -1600px top;

	}
}
@keyframes two{
	
	0%{
		background-position: left top;
	}
	12.5%{
		background-position: -170px top;
	}
	25%{
		background-position: -340px top;

	}
	37.5%{
		background-position: -510px top;

	}
	50%{
		background-position: -680px top;

	}
	62.5%{
		background-position: -850px top;
	}
	75%{
		background-position: -1020px top;

	}
	87.5%{
		background-position: -1190px top;

	}
	100%{
		background-position: -1360px top;

	}
}
@keyframes three{
	
	0%{
		background-position: left top;
	}
	12.5%{
		background-position: -210px top;
	}
	25%{
		background-position: -420px top;

	}
	37.5%{
		background-position: -630px top;

	}
	50%{
		background-position: -840px top;

	}
	62.5%{
		background-position: -1050px top;
	}
	75%{
		background-position: -1260px top;

	}
	87.5%{
		background-position: -1470px top;

	}
	100%{
		background-position: -1680px top;

	}
}



